<template>
	<div>
		<!--		<div>-->
		<!--			<el-button @click="addDialog = true">添加影视剧</el-button>-->
		<!--		</div>-->
		<el-table :data="tableData.records">
			<el-table-column prop="name" label="电影名" width="120" fixed="left" />
			<el-table-column prop="sort" label="影视类型" width="80">
				<template #default="scope">
					<el-tag type="success">{{ scope.row.sort === "1" ? "电影" : "电视剧" }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="country" label="国家" width="80" />
			<el-table-column prop="year" label="发布年份" width="120" />
			<el-table-column prop="score" label="评分" width="80" />
			<el-table-column prop="people" label="参与评分人数" width="80" />
			<el-table-column prop="imdb" label="IMDB评分" width="120" />
			<el-table-column prop="douban" label="豆瓣评分" width="120" />
			<el-table-column prop="posterAddress" label="海报" width="120">
				<template #default="scope">
					<el-image :src="scope.row.posterAddress" alt="" fit="fill" style="width: 100px; height: 100px" />
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="220" />
			<el-table-column label="操作" width="170" fixed="right">
				<template #default="scope">
					<el-button size="small" @click="openEdit(scope.row.id)">查看评论</el-button>
					<el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			style="margin-bottom: 20px"
			background
			layout="prev, pager, next"
			:page-count="tableData.pages"
			v-model:current-page="tableData.page"
			@update:current-page="loadData"
		/>

		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="editDialog"
			title="查看"
			width="40%"
			:before-close="resetForm"
		>
			<div v-loading="commentListPage.loading">
				<div v-for="(item, index) in commentListPage.records" :key="index" class="pb-1 mb-1">
					<div class="flex border-b-2 mb-2">
						<div class="flex">
							<div>
								<el-avatar :src="item.root.member.avatar" class="w-[50px] h-[50px]" />
							</div>
						</div>
						<div class="ml-3 break-all mb-2 w-full">
							<div class="flex justify-between">
								<div>{{ item.root.member.username }}</div>
								<div class="flex">
									<div>{{ item.root.createTime }}</div>
									<div class="ml-[10px]">
										<el-button size="small" @click="deleteComment(item.root.id, item.root.otherId)" type="danger">删除 </el-button>
									</div>
								</div>
							</div>
							<div>
								{{ item.root.content.message }}
							</div>
						</div>
					</div>
					<div class="">
						<div v-for="(reply, replyIndex) in item.replies" :key="replyIndex" class="flex border-b-2 pl-11 mt-3">
							<div class="flex">
								<div>
									<el-avatar :src="reply.member.avatar" class="w-[50px] h-[50px]" />
								</div>
							</div>
							<div class="ml-3 break-all w-full">
								<div class="flex justify-between w-full">
									<div>{{ reply.member.username }}</div>
									<div class="flex">
										<div>{{ reply.createTime }}</div>
										<div class="ml-[10px]">
											<el-button size="small" @click="deleteComment(reply.id, item.root.otherId)" type="danger">删除 </el-button>
										</div>
									</div>
								</div>
								<div>{{ reply.content.message }}</div>
							</div>
						</div>
					</div>
				</div>
				<div>
					<el-pagination
						style="margin-bottom: 20px"
						background
						layout="prev, pager, next"
						:page-count="commentListPage.pages"
						v-model:current-page="commentListPage.current"
						@update:current-page="loadComments"
					/>
				</div>
			</div>
			<!--			<el-table :data="commentListPage.records" row-key="id" border :tree-props="{ children: 'replies', hasChildren: 'hasChildren' }">-->
			<!--				<el-table-column width="80" label="回复" type="expand">-->
			<!--					<template #default="props">-->
			<!--						<div>-->
			<!--							<el-table :data="props.row.replies" :border="true">-->
			<!--								<el-table-column label="名字" prop="member.username" />-->
			<!--								<el-table-column label="内容" prop="content.message" />-->
			<!--							</el-table>-->
			<!--						</div>-->
			<!--					</template>-->
			<!--				</el-table-column>-->
			<!--				<el-table-column prop="root.member.username" label="用户名" />-->
			<!--				<el-table-column prop="root.content.message" label="内容" />-->
			<!--			</el-table>-->
		</el-dialog>
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref, computed } from "vue";
import { deletedMove, getMovePage } from "@/api/move";
import { delComment, getListAllComments } from "@/api/comment";

const tableData = reactive({
	records: [],
	pages: 0,
	page: 1,
	size: 10,
});

const commentListPage = reactive({
	records: [],
	pages: 0,
	page: 1,
	size: 10,
	loading: false,
});

const editDialog = ref(false);
const openEdit = (id) => {
	editDialog.value = true;
	loadComments(id);
};

const loadComments = async (otherId) => {
	commentListPage.loading = true;
	const res = await getListAllComments(otherId, commentListPage.page, commentListPage.size);
	commentListPage.loading = false;
	if (res.success) {
		commentListPage.records = res.data.page.list;
	} else {
		ElMessage.error(res.msg);
	}
};

const deleteComment = async (commentId, otherId) => {
	ElMessageBox.confirm("确认要删除该评论?", "Warning", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		const res = await delComment(commentId);
		if (res.success) {
			ElMessage.success("删除完成");
		} else {
			ElMessage.error(res.msg);
		}
		await loadComments(otherId);
	});
};

const edit = async () => {
	// const res = await updateMove(formData.value);
	// if (res.success) {
	// 	ElMessage.success("修改成功");
	// } else {
	// 	ElMessage.error(res.msg);
	// }
	// editDialog.value = false;
	// resetForm();
	// loadData();
};

const deleted = async (id) => {
	ElMessageBox.confirm("确认要删除该电影?", "Warning", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		const res = await deletedMove(id);
		if (res.success) {
			ElMessage.success("删除完成");
		} else {
			ElMessage.error(res.msg);
		}
		loadData();
	});
};
const resetForm = () => {
	if (editDialog.value) {
		editDialog.value = false;
	}
};

const loadData = async () => {
	const res = await getMovePage({
		page: tableData.page,
		size: tableData.size,
	});
	if (res.success) {
		tableData.records = res.data.list;
		tableData.page = res.data.pageNum;
		tableData.pages = res.data.pages;
	}
};

onMounted(() => {
	loadData();
});
</script>

<style scoped></style>
